<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <div th:replace="block/head"></div>
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">

        <form class="layui-form" id="searchForm" lay-filter="searchFormFilter">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">用户名</label>
                    <div class="layui-input-inline">
                        <input type="text" name="userName" placeholder="请输入用户名" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">设备信息</label>
                    <div class="layui-input-inline">
                        <input type="text" name="device" placeholder="请输入设备信息" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">响应编码</label>
                    <div class="layui-input-inline">
                        <input type="number" name="code" placeholder="请输入响应编码" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">响应信息</label>
                    <div class="layui-input-inline">
                        <input type="text" name="message" placeholder="请输入响应信息" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <button type="submit" class="layui-btn layui-btn-sm layui-btn-normal" lay-submit
                            lay-filter="searchSubmit"><i class="layui-icon"></i>搜索
                    </button>
                    <button type="button" class="layui-btn layui-btn-sm layui-btn-primary"
                            id="searchReset"><i class="layui-icon layui-icon-refresh"></i>重置
                    </button>
                </div>
            </div>
        </form>

        <!-- 表头、表、操作按钮 -->
        <script type="text/html" id="toolbar">
            <div class="layui-btn-container">
                <button class="layui-btn layui-btn-normal layui-btn-sm layui-btn-danger" lay-event="clean"
                        shiro:hasPermission="system:loginLog:clean">
                    <i class="layui-icon layui-icon-close"></i>清空日志
                </button>
            </div>
        </script>
        <table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>
    </div>
</div>

<div id="detailFormModal" class="straw-layer">
    <form class="layui-form" id="detailForm" lay-filter="detailFormFilter">
        <div class="layui-form-item">
            <label class="layui-form-label">账号</label>
            <div class="layui-input-block">
                <input type="text" name="userName" readonly class="layui-input layui-input-view">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">IP地址</label>
            <div class="layui-input-block">
                <input type="text" name="ip" readonly class="layui-input layui-input-view">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">地理位置</label>
            <div class="layui-input-block">
                <input type="text" name="location" readonly class="layui-input layui-input-view">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">设备信息</label>
            <div class="layui-input-block">
                <input type="text" name="device" readonly class="layui-input layui-input-view">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">响应编码</label>
            <div class="layui-input-block">
                <input type="text" name="code" readonly class="layui-input layui-input-view">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">响应信息</label>
            <div class="layui-input-block">
                <pre class="layui-code" id="message" lay-title="JSON" lay-skin="notepad"></pre>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">操作时间</label>
            <div class="layui-input-block">
                <input type="text" name="createTime" readonly class="layui-input layui-input-view">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="button" class="layui-btn layui-btn-primary" id="detailFormReset">关闭</button>
            </div>
        </div>
    </form>
</div>

<div th:replace="block/js"></div>
<script th:inline="javascript">
    let loginLogDetail = false;
    let loginLogDelete = false;
</script>
<script shiro:hasPermission="system:loginLog:detail">loginLogDetail = true;</script>
<script shiro:hasPermission="system:loginLog:delete">loginLogDelete = true;</script>
<script th:inline="javascript">
    layui.use(['element', 'form', 'table', 'code'], function () {
        let $ = layui.jquery,
            form = layui.form,
            table = layui.table;

        layui.code();

        let active = {
            dataModelType: 1,
            openDataFormModal() {
                let title = active.dataModelType == 1 ? '新增表单' : '编辑表单';
                layer.open({
                    title: title
                    , type: 1
                    , content: $('#dataFormModal')
                    , area: ['600px', '500px']
                    , maxmin: true
                    , cancel: function () {
                        active.closeDataFormModal();
                    }
                });
            },
            closeDataFormModal() {
                $('#dataForm')[0].reset();
                dataTree.menubarMethod().unCheckAll();
                layer.closeAll();
            },
            resetTable(data) {
                table.reload('currentTableId', {page: {curr: 1}, where: data}, 'data');
            }
        };

        table.render({
            elem: '#currentTableId',
            method: 'post',
            url: '/system/loginLog/listByTable',
            toolbar: '#toolbar',
            defaultToolbar: ['filter', 'exports', 'print'],
            height: "full-" + ($('#searchForm').height() + 70),
            page: true,
            limit: 20,
            limits: [20, 40, 60, 80, 100],
            cols: [ [
                {type: "numbers", title: '序号'},
                {field: 'userName', title: '账号', width: 100},
                {field: 'ip', title: 'IP地址', width: 120},
                {field: 'location', title: '地理位置'},
                {field: 'device', title: '设备信息'},
                {field: 'code', title: '响应编码', width: 100, align: 'center'},
                {field: 'message', title: '响应信息'},
                {field: 'createTime', title: '操作时间', width: 160},
                {
                    title: '操作', width: 120, align: "center", templet: function () {
                        let dom = '';
                        if (loginLogDetail) dom += '<a class="layui-btn layui-btn-xs" lay-event="detail">详情</a>';
                        if (loginLogDelete) dom += '<a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a>';
                        return dom;
                    }
                }
            ]]
        });

        // 监听搜索
        form.on('submit(searchSubmit)', function (data) {
            active.resetTable(data.field);
            return false;
        });
        // 监听重置
        $('#searchReset').on('click', function () {
            $('#searchForm')[0].reset();
            active.resetTable(form.val('searchFormFilter'));
        });

        // 监听头部按钮
        table.on('toolbar(currentTableFilter)', function (obj) {
            if (obj.event === 'clean') {
                layer.confirm('确定清空所有日志吗？', function (index) {
                    $.ajax({
                        type: 'get',
                        url: '/system/loginLog/deleteAll',
                        dataType: 'json',
                        success: function (res) {
                            if (res.code == 200) {
                                layer.msg(res.msg, {time: 2000, icon: 1}, function () {
                                    window.location.reload();
                                });
                            } else {
                                layer.msg(res.msg, {time: 2000, icon: 2});
                            }
                        },
                        error: function (res) {
                            layer.msg('请求失败', {time: 2000, icon: 2});
                        }
                    });
                });
            }
        });

        // 监听行按钮
        table.on('tool(currentTableFilter)', function (obj) {
            let data = obj.data;
            if (obj.event === 'detail') {
                $('#message').text(JSON.stringify(JSON.parse(data.message), null, 4));
                form.val('detailFormFilter', data);
                layer.open({
                    title: '详细信息'
                    , type: 1
                    , content: $('#detailFormModal')
                    , area: ['600px', '500px']
                    , maxmin: true
                });
            } else if (obj.event === 'del') {
                layer.confirm('确定删除该数据吗？', function (index) {
                    $.ajax({
                        type: 'post',
                        url: '/system/loginLog/deleteById',
                        data: {id: data.id},
                        dataType: 'json',
                        success: function (res) {
                            if (res.code == 200) {
                                layer.msg(res.msg, {time: 2000, icon: 1}, function () {
                                    window.location.reload();
                                });
                            } else {
                                layer.msg(res.msg, {time: 2000, icon: 2});
                            }
                        },
                        error: function (res) {
                            layer.msg('请求失败', {time: 2000, icon: 2});
                        }
                    });
                });
            }
        });

        // 监听详情表单关闭
        $('#detailFormReset').on('click', function () {
            $('#detailForm')[0].reset();
            layer.closeAll();
        });
    });
</script>

</body>
</html>
